<template>
  <div class="alarmConfiguration zy-content">
    <div class="searchBox search-box-layout mb16">
      <Row :gutter="24">
        <Col span="4">
          <div>
            <p class="label">车间</p>
            <div class="ipt">
              <Cascader clearable :data="orgList" v-model="searchParams.functionLocation"
                        :placeholder="`${$t('common.selectInfo')}`" change-on-select>
              </Cascader>
            </div>
          </div>
        </Col>
        <Col span="4">
          <div>
            <p class="label">设备编号</p>
            <div class="ipt">
              <Input v-model="searchParams.deviceNo"></Input>
            </div>
          </div>
        </Col>
        <Col span="4">
          <div>
            <p class="label">停机类别</p>
            <div class="ipt">

              <Select @on-change="changeReason" v-model="searchParams.shutdownCategory" clearable :disabled="showF"
                      :placeholder="`${$t('common.selectInfo')}`">
                <Option v-for="(item,index) of categoryList" :value="item.shutdownCategory"
                        :label="item.shutdownCategory" :key="index"></Option>
              </Select>
            </div>
          </div>
        </Col>
        <Col span="4">
          <div>
            <p class="label">停机原因</p>
            <div class="ipt">
              <Select v-model="searchParams.reasonShutdown" clearable
                      :placeholder="`${$t('common.selectInfo')}`">
                <Option v-for="(item,index) of resonList" :value="item.reasonForShutdown"
                        :label="item.reasonForShutdown" :key="index"></Option>
              </Select>
            </div>
          </div>
        </Col>
        <Col span="4">
          <div>
            <p class="label">停机开始时间</p>
            <div class="ipt">
              <DatePicker
                  type="daterange"
                  :value="searchParams.time"
                  @on-change="timeChange($event, 'time')"
                  format="yyyy-MM-dd"
                  placeholder="请选择日期"
              />
            </div>
          </div>
        </Col>
        <Col span="4">
          <div>
            <p class="label">停机结束时间</p>
            <div class="ipt">
              <DatePicker
                  type="daterange"
                  :value="searchParams.time2"
                  @on-change="timeChange($event, 'time2')"
                  format="yyyy-MM-dd"
                  placeholder="请选择日期"
              />
            </div>
          </div>
        </Col>
        <Col span="4">
          <div>
            <p class="label hide-label">--</p>
            <div class="ipt">
              <Button class="search-btn" type="primary" @click="getSearch">{{ $t('common.Query') }}</Button>
              <Button
                  class="reset-btn"
                  @click="reset()"
              >{{ $t('common.reset') }}
              </Button>
            </div>
          </div>
        </Col>
      </Row>
    </div>

    <div class="list-layout mt16">
      <div class="btns clear">
        <span class="title">{{ $t('common.listInformation') }}</span>
        <Button @click="exportTemplateClick">{{ $t('common.batchExport') }}</Button>
        <!-- <Button
          @click="getTableColumns(columns)"
        >{{ handleContextMenuStatus ? $t('显示操作栏') : $t('隐藏操作栏') }}</Button> -->
      </div>
      <!-- 表格 -->
      <div class="tableContent">
        <Table
            class="resizable-table"
            border
            @on-column-width-resize="onColumnWidthResize"
            :columns="columnsList"
            ellipsis
            ref="selection"
            stripe
            :data="dataArr"
            @on-selection-change="onSelectChange"
        >
          <template slot-scope="{ row }" slot="action">
            <span class="operationBtn" @click="createfaultCodeShowH(row)">
              <i class="iconfont zy-common-bianji"></i>
              {{ $t('common.Edit') }}
            </span>
            <span class="operationBtn" @click="delPrrShowH(row)">
              <i class="iconfont zy-common-shanchu"></i>
              {{
                $t('common.Delete')
              }}
            </span>
          </template>
        </Table>
      </div>
      <!-- 分页 -->
      <div class="pageWrap mt16">
        <pageLeftTitle :total="total" :selected="delIds.length"/>
        <Page
            :total="total"
            :page-size="pageSize"
            :page-size-opts="pageSizeOption"
            :current="pageNum"
            @on-change="changePageNum"
            @on-page-size-change="changePageSize"
            show-sizer
            show-total
        />
      </div>
    </div>
  </div>
</template>

<script>
import {findOrgByToken} from "@/api/index.js";
import fileDownload from "js-file-download";
import toggleTableOperation from "@/mixins/toggleTableOperation";
import recursion from "@/util/recursion";

export default {
  name: "abnormalShutdown",
  mixins: [toggleTableOperation],
  data() {
    return {
      showDetailDialog: false,
      locationList: [],
      importExcelState: false /*批量导入*/,
      formItem: {},
      addtitle: "",
      allCheck: false,
      loading: false,
      create: false,
      searchParams: {},
      pageNum: 1,
      pageSize: 10,
      total: 0,

      columns: [
        {
          key: "selection",
          type: "selection",
          width: 60,
          align: "center"
        },
        {
          title: "车间",
          key: "functionLocationName",
          minWidth: 130,
          align: "center",
          resizable: true
        },
        {
          title: "设备编号",
          key: "deviceNo",
          minWidth: 130,
          align: "center",
          resizable: true
        },
        {
          title: "停机类别",
          key: "shutdownCategory",
          minWidth: 150,
          align: "center",
          resizable: true
        },
        {
          title: "停机原因",
          key: "reasonShutdown",
          minWidth: 130,
          align: "center",
          resizable: true
        },
        {
          title: "开始操作人",
          key: "operator",
          minWidth: 150,
          align: "center",
          resizable: true
        },
        {
          title: "班次日期",
          key: "shiftDate",
          minWidth: 150,
          align: "center",
          resizable: true
        },
        {
          title: "班次",
          key: "shiftName",
          minWidth: 150,
          align: "center",
          resizable: true
        },
        {
          title: "模具号",
          key: "moldCode",
          minWidth: 150,
          align: "center",
          resizable: true
        },
        {
          title: "开始时间",
          key: "shutdownStartTime",
          minWidth: 150,
          align: "center",
          resizable: true
        },
        {
          title: "开始停机备注",
          key: "remarks",
          minWidth: 150,
          align: "center",
          resizable: true
        },
        {
          title: "结束停机备注",
          key: "remarksAfter",
          minWidth: 150,
          align: "center",
          resizable: true
        },
        {
          title: "结束操作人",
          key: "operatorEnd",
          minWidth: 150,
          align: "center",
          resizable: true
        },
        {
          title: "结束时间",
          key: "shutdownEndTime",
          minWidth: 180,
          align: "center",
          resizable: true
        },
        {
          title: "停机时长(min)",
          key: "shutdownDuration",
          minWidth: 180,
          align: "center",
          resizable: true
        }
        // {
        //   title: "停机图片",
        //   key: "remark",
        //   minWidth: 180,
        //   align: "center",
        //   resizable: true
        // }
        // {
        //     //title: '操作',
        //     title: `${this.$t('common.operation')}`,
        //     slot: "action",
        //     fixed: 'right',
        //     minWidth: 160,
        //     align: "center"
        // }
      ],
      orgList: [], //功能位置
      dataArr: [],
      categoryList: [],
      pageSizeOption: [10, 20, 30, 40],
      delIds: [],
      selection: [],
      resonList: [],
      searchParams1: {},
    };
  },
  mounted() {
    this.getTableColumnsWidth(this.columns);
    this.getSearch();
    // 基础数据，字典数据
    this.getOrgList()
    this.getCatList()
    // this.getUserList();
  },
  methods: {
    getSearch() {
      this.searchParams1 = JSON.parse(JSON.stringify(this.searchParams))
      const {functionLocation, time, time2} = this.searchParams1;
      if (functionLocation && functionLocation.length > 0) {
        this.searchParams1.functionLocation = [functionLocation.at(-1)];
      }
      if (time && time.length == 2) {
        this.searchParams1.shutdownStartOneTime = time[0];
        this.searchParams1.shutdownEndOneTime = time[1];
        delete this.searchParams1.time;
      }
      if (time2 && time2.length == 2) {
        this.searchParams1.shutdownStartTwoTime = time2[0];
        this.searchParams1.shutdownEndTwoTime = time2[1];
        delete this.searchParams1.time2;
      }
      this.pageNum = 1;
      this.searchList();
    },
    timeChange(val, key) {
      this.$set(this.searchParams, key, val)
    },
    changeReason(val) {
      const arg = this.categoryList.find(item => item.shutdownCategory == val)
      if (arg) {
        this.getResonList(arg.id)
      }
    },
    getResonList(id) {
      this.axios({
        url: "/dms/abnormalShutdown/queryShutdownReasonList",
        method: "get",
        params: {
          abnormalId: id,
        }
      }).then(res => {
        if (res.code == 200) {
          this.resonList = res.data;
        }
      });
    },
    getCatList() {
      this.axios({
        url: "/dms/abnormalShutdown/queryShutdownCategoryList",
        method: "get",
      }).then(res => {
        if (res.code == 200) {
          console.log(res.data);
          this.categoryList = res.data;
        }
      });
    },
    getOrgList() {
      let params = {
        level: 0
      };
      findOrgByToken(params).then(res => {
        if (res.code === 200) {
          const obj = {
            label: "name",
            value: "code",
            children: "children"
          };
          this.orgList = recursion.convertTree(res.data, obj);
        } else {
          this.$Message.warning({
            content: res.msg,
            duration: 6,
            closable: true
          });
        }
      });
    },
    reset() {
      this.searchParams1 = {};
      this.searchParams = {};
      this.changeNum();
    },
    //分页
    changeNum() {
      this.pageNum = 1;
      this.searchList();
    },
    changePageSize(pageSize) {
      this.pageSize = pageSize;
      this.searchList();
    },

    changePageNum(val) {
      this.pageNum = val;
      this.searchList();
    },
    //查询列表
    searchList() {
      let params = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        ...this.searchParams1
      };
      this.axios({
        method: "post",
        // url: "/dms/warehouseDetails/getWarehouseDetailsList",
        url: "dms/abnormalShutdown/queryAbnormalShutdownList",
        data: params
      }).then(res => {
        if (res.code === 200) {
          this.dataArr = res.data.records;
          this.total = res.data.total;
        } else {
          this.$Message.warning({
            content: res.msg,
            duration: 6,
            closable: true
          });
        }
      });
    },
    //勾选列表
    onSelectChange(selection) {
      let myArray = [];
      selection.map((item) => {
        myArray.push(item.id);
      });
      this.delIds = myArray;
      if (selection.length > 0) {
        this.allCheck = true;
      } else {
        this.allCheck = false;
      }
    },
    //导出
    exportTemplateClick() {
      const search = JSON.parse(JSON.stringify(this.searchParams))
      const {functionLocation, time, time2} = search;
      if (functionLocation && functionLocation.length > 0) {
        search.functionLocation = [functionLocation.at(-1)];
      }
      if (time && time.length == 2) {
        search.shutdownStartOneTime = time[0];
        search.shutdownEndOneTime = time[1];
        delete search.time;
      }
      if (time2 && time2.length == 2) {
        search.shutdownStartTwoTime = time2[0];
        search.shutdownEndTwoTime = time2[1];
        delete search.time2;
      }
      search.delIds = this.delIds
      const params = {}
      for (let key in search) {
        if (search[key]) {
          this.$set(params, key, search[key]);
        }
      }
      const filName = "异常停机记录";
      this.axios({
        url: "/dms/abnormalShutdown/export",
        method: "post",
        data: params,
        responseType: "blob"
      }).then(res => {
        fileDownload(res, filName + ".xlsx");
      });
    }
  }
};
</script>

<style scoped lang="scss">
.ivu-input-number {
  width: -webkit-fill-available;
}

.row_click {
  cursor: pointer;
  color: rgb(50, 113, 240) !important;
}
</style>

